<template>
  <div id="jx-examination-virtual-machine" class="jx-virtual-machine" v-loading="deskLoading" :element-loading-text="deskLoadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div class="jx-virtual-machine-header">
      <div class="jx-virtual-machine-header-logo fl" :title="courseName" v-text="courseName"></div>
      <div class="jx-virtual-machine-header-dropout fr">
        <i class="iconfont icon-Group-" @click="DropoutVirtual"></i>
      </div>
      <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
            <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr"  @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
        </div>
    </div>
    <div class="jx-virtual-machine-main">
      <!-- 实现手册 -->
      <div class="step-main-content fl" v-show="!fullScreen">
        <div class="tab-main">
          <div class="jx-main-content">
            <div class="step-main-content-box">
              <div class="clearfix">
                <h2 class="jx-title fl">编辑试题</h2>
                <div class="fr" style="padding-top: 20px;">
                  <el-tooltip content="学生答题时的模板请在创作课程-报告模板-实验考试报告模板中添加。" placement="bottom" effect="light">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                </div>
              </div>
              <mavonEditor class="step-main-editor" ref="question"></mavonEditor>
              <div class="answer-editor">
                <h2 class="jx-title">参考答案</h2>
                <mavonEditor class="step-main-editor" ref="answer"></mavonEditor>
                <!-- <el-input v-model="resData.answer[0].content" type="textarea" :rows="5"></el-input> -->
              </div>
            </div>
            <div class="step-main-btn-group">
              <button class="button-style" @click="editQuestion(1)">保存</button>
            </div>
          </div>
        </div>
      </div>
      <div class="step-main-mirror fl">
        <div class="mirror-iframe" v-if="!mirrorIframeTip">
          <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
        </div>
        <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
            <img src="./../../../assets/images/mirror_iframe_tip.png" />
            <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
            <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
        </div>
        <div class="step-main-mirror-side" v-if="fullScreen">
          <ul>
            <li @click="EditDialog">
              <i class="iconfont icon-wenda2"></i>编辑</li>
          </ul>
        </div>
        <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl">
          <div class="step-main-mirror-dialog-block">
            <div class="step-main-mirror-dialog-box">
              <div class="mirror-dialog-header">
                <Time :autoStart="true"></Time>
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="refreshVirtual(0)"><i class="iconfont icon-shuaxin"></i>刷新</span>
                </div>
                <div class="item-btn">
                  <span @click="InitVirtual"><i class="iconfont icon-zhongxinshiyang"></i>初始化</span>
                  <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                </div>
                <div class="item-btn" v-if="!fullScreen">
                  <span @click="VirtualFullScreen(2)"><i class="iconfont icon-full-screen"></i>虚拟机全屏</span>
                </div>
                <div class="item-btn" v-if="fullScreen">
                  <span @click="VirtualFullScreen(3)"><i class="iconfont icon-full-screen"></i>退出全屏</span>
                </div>
                <div class="item-btn">
                  <span @click="VirtualSave"><i class="iconfont icon-baocun1"></i>镜像保存</span>
                </div>
                <div class="item-btn">
                  <span @click="VirtualLink"><i class="iconfont icon-peizhiguanli"></i>重选配置</span>
                </div>
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="SftpConfig"><i class="iconfont icon-upload"></i>SFTP工具</span>
                </div>
                <div class="item-btn">
                  <span @click="UploadFile"><i class="iconfont icon-shangchuan-"></i>文件上传</span>
                  <!-- <el-tooltip class="item" effect="light" content="上传文件至虚拟机/root/tools/文件夹" placement="left-end" style="position:absolute; right: -10px; top: 5px;">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip> -->
                </div>
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="ExperimentScreenshot"><i class="iconfont icon-jietu1"></i>实验截图</span>
                </div>
                <div class="item-btn">
                  <span @click="CutDialog"><i class="iconfont icon-jietu"></i>剪切板</span>
                </div>
              </div>
            </div>
          </div>
          <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
            <div>工具栏</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 实验截图 -->
    <el-dialog :close-on-click-modal="false" class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
      <div class="dialog-content clear-fix">
        <img :src="dialogScreenshotUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
        <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 编辑试题 -->
    <el-dialog :close-on-click-modal="false" class="dialog-editor" v-dialogDrag ref="dialog__wrapper" title="编辑试题" :modal="false" :visible.sync="dialogEditDrag" :modal-append-to-body="false"  width="620px">
      <div class="dialog-body" :draggable='false'>
        <h2 class="jx-title">编辑试题</h2>
        <mavonEditor style="height:300px;" ref="EditQuestionDialog"></mavonEditor>
        <h2 class="jx-title">参考答案</h2>
        <mavonEditor style="height:300px;" ref="EditAnswerDialog"></mavonEditor>
        <!-- <el-input v-model="dialogEditorAnswer" type="textarea" :rows="5"></el-input> -->
      </div>
      <div slot="footer" class="dialog-footer" :draggable='false'>
        <el-button class="button-style" @click="editQuestion(2)">确定</el-button>
      </div>
    </el-dialog>
    <!-- SFTP -->
    <el-dialog :close-on-click-modal="false" class="sftp-dialog" title="SFTP工具" :visible.sync="dialogSftp" width="50%">
      <div class="sftp-content">
        <div class="sftp-header">
          <div class="sftp-title">
            您可以使用SFTP工具上传、下载文件:
          </div>
          <p>SFTP访问的地址为
            <span>{{ sftpIp[0] }}</span>
          </p>
          <p>用户名 :
            <span>root </span> 密码 :
            <span>root</span>
          </p>
        </div>
        <div class="sftp-desc">
          <div class="sftp-title">
            使用说明
          </div>
          <div class="desc-item">
            <p>1.请先下载SFTP工具
              <a :href="sftpIp[1]+'/psftp_64.exe'">
                <i class="iconfont icon-tubiaozhizuo-">
                  <img src="./../../../assets/images/sftp_icon1.png" />
                </i>
              </a>
              <a :href="sftpIp[1]+'/psftp_32.exe'">
                <i class="iconfont icon-tubiaozhizuo-">
                  <img src="./../../../assets/images/sftp_icon2.png" />
                </i>
              </a>
            </p>
            <p>2.使用登陆命令
              <span>open username@host post</span>
            </p>
            <p>说明：username为用户名 host 为主机地址，post为端口号</p>
            <p>3.填写密码进入SFTP环境。</p>
            <p>4.上传命令
              <span>put dir/something.txt dir/another.txt</span>
            </p>
            <p>说明：dir/something.txt 为用户当前环境的地址+文件。dir/another.txt为虚拟环境的地址加文件。</p>
            <p>例如：命令 put D:/bigdata.sql /home/bigdata.sql 则是把本地D盘的bigdata.sql 文件上传至虚拟环境home 目录。</p>
            <p>5.下载命令
              <span>get dir/something.txt dir/another.txt</span>
            </p>
            <p>说明：dir/something.txt 为虚拟环境的地址加文件。dir/another.txt用户当前环境的地址+文件。</p>
            <p>例如：命令 get /home/bigdata.sql E:/bigdata.sql 则是把虚拟环境home 目录的bigdata.sql 文件下载至的本地E盘。</p>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogSftp = false">确定</el-button>
      </div>
    </el-dialog>
    <!-- 剪切板 -->
    <el-dialog :close-on-click-modal="false" class="cut-dialog" title="剪切板" :visible.sync="dialogCut" width="655px" @close="CutCloseDialog">
      <div class="cut-title">
        <p>
          <span>复制外部内容到实验环境内 : </span>粘贴内容到下方输入框一点击保存</p>
      </div>
      <el-form :model="cutData.cutRuleForm" :rules="cutData.cutRules" ref="cutRuleForm">
        <el-form-item prop="desc">
          <el-input type="textarea" @input="CutContentInput" maxlength="20000" v-model="cutData.cutRuleForm.desc" style="height:200px;"></el-input>
          <div class="desc-num">{{cutData.cutRuleForm.descNum}}/20000</div>
        </el-form-item>
        <el-form-item style="text-align:center;">
          <el-button class="button-style" @click="cutSubmitForm('cutRuleForm')">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 文件上传 -->
    <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="文件上传" :visible.sync="dialogFileUpload" width="460px" @close="CloseFileUploadDialog">
        <el-form :model="FileUploadForm" :rules="FileUploadRules" ref="FileUploadForm">
            <el-form-item class="version-file">
                <el-button class="button-style">上传文件<input id="version-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input></el-button>
                <p style="float:left; line-height: 36px; color: #1277eb; margin-left: 5px;">上传文件至虚拟机/root/tools/文件夹</p>
                <p style="float:left; margin-top: 20px; word-break:break-all; width: 100%;" v-if="FileUploadForm.versionFile.length>0">已选: {{FileUploadForm.versionFile}}</p>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="text-align:center;">
            <el-button class="button-style" style="width: 100px;" @click="UploadSave('FileUploadForm')">上传至虚机</el-button>
        </div>
    </el-dialog>
    <!-- 关闭分享 -->
    <el-dialog :close-on-click-modal="false" class="dialog-download-file" title="关闭分享" :visible.sync="dialogCloseShare" width="460px">
      <div class="dialog-content">
        <p>是否关闭分享</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button class="button-style" @click="CloseShare">关 闭</el-button> -->
        <el-button class="button-style" @click="dialogCloseShare = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 保存镜像 -->
    <el-dialog :close-on-click-modal="false" class="dialog-mirror-save" title="保存镜像信息" :visible.sync="dialogMirrorInfo" v-if='dialogMirrorInfo' width="820px">
      <el-form label-width="100px" :rules="MirrorFormRules" :model="MirrorForm" ref='MirrorForm'>
        <el-form-item label="保存方式：" v-if="saveWayStatus">
          <el-radio-group v-model="MirrorForm.saveWay" @change="MirrorRadioChange">
            <el-radio :label="1">覆盖原镜像</el-radio>
            <el-radio :label="2">新生成镜像</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="镜像名称：" prop="MirrorName">
          <el-input type="text" v-model="MirrorForm.MirrorName" maxlength="20" @input="MirrorNameInput"></el-input>
          <p style="position:absolute; left:240px; top: 12px; color:#bbb;"> {{MirrorForm.MirrorNameNum}}/20</p>
        </el-form-item>
        <div>
          <span class="label" style="margin:6px 0 0px 8px">
            <span style="color:#F56C6C">*</span> 镜像图标：</span>
          <div class="distribution-swpier">
            <swiper :options="swiperDialogOption">
              <swiper-slide v-for="(item, index) in iconListData" :key="index">
                <div class="distribution-box" @click="IconChange(item.icon)">
                  <img :src="item.iconUrl" />
                  <i class="iconfont icon-zhengque" v-if="item.icon == MirrorForm.iconId"></i>
                </div>
              </swiper-slide>
            </swiper>
            <div class="swiper-btn swiper-button-prev" slot="button-prev" v-show="iconListData.length > 5">
              <i class="iconfont icon-xiangzuo-copy"></i>
            </div>
            <div class="swiper-btn swiper-button-next" slot="button-next" v-show="iconListData.length > 5">
              <i class="iconfont icon-xiangyou"></i>
            </div>
          </div>
        </div>
        <div class="clear-fix"></div>
        <el-form-item label="镜像简介：" prop="MirrorDesc">
          <el-input type="textarea" v-model="MirrorForm.MirrorDesc" maxlength="200" @input="MirrorDescInput"></el-input>
          <p style="position:absolute; left: 610px; bottom: 0px; color:#bbb;"> {{MirrorForm.MirrorDescNum}}/200</p>
        </el-form-item>

        <div class="footer" style="text-align:center;">
          <el-button class="button-style saveBtn" @click="ModifyMirrorFormSave('MirrorForm')">保存</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 重选配置 -->
    <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="重选配置" :visible.sync="dialogDistributionFormVisible" label-width="100px" width="830px">
      <el-form :model="distributionform" ref="distributionform">
        <el-form-item class="is-required" label="配置类型：">
            <el-radio-group v-model="distributionform.resource">
                <el-radio :label="1">单节点</el-radio>
                <el-radio :label="2">集群</el-radio>
            </el-radio-group>
        </el-form-item>
        <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
        <!-- 伪分布 -->
        <el-form-item class="config-item" v-if="distributionform.resource == 1">
          <div class="fl item-config">
            <el-form-item prop="distributedData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
              <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                <el-option v-for="item in distributionform.distributedData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="distributedData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
              <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                <el-option v-for="item in distributionform.distributedData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <el-form-item class="fl item-Gpu" label="GPU">
            <el-switch v-model="distributionform.distributedData.switchValue">
            </el-switch>
          </el-form-item>
        </el-form-item>
        <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 1">
            <el-cascader
                :options="distributionform.options0"
                v-model="distributionform.optionsValue0"
                :show-all-levels="false"
                @change="handleItemChange"
            ></el-cascader>
        </el-form-item>
        <!-- 伪分布end -->
        <!-- 主节点 -->
        <el-form-item class="config-item" v-if="distributionform.resource == 2">
          <div class="fl item-config">
            <el-form-item prop="nodeMianData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
              <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                <el-option v-for="item in distributionform.nodeMianData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="nodeMianData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
              <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                <el-option v-for="item in distributionform.nodeMianData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <el-form-item class="fl item-Gpu" label="GPU">
            <el-switch v-model="distributionform.nodeMianData.switchValue">
            </el-switch>
          </el-form-item> -->
        </el-form-item>
        <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 2">
            <el-cascader
                :options="distributionform.options7"
                v-model="distributionform.optionsValue7"
                :show-all-levels="false"
                @change="handleItemChange"
            ></el-cascader>
        </el-form-item>
        <!-- 伪分布end -->
        <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
        <!-- 镜像配置 -->
        <el-form-item class="config-item" v-if="distributionform.resource == 2">
          <div class="fl item-config">
            <el-form-item prop="mirrorConfigData.cpuValue" :rules="{
                                required: true, message: '请选择CPU上限', trigger: 'blur'
                            }" label="配置：" style=" float:left; width:210px;" class="item-cpu">
              <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                <el-option v-for="item in distributionform.mirrorConfigData.cpuOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="mirrorConfigData.ramValue" :rules="{
                                required: true, message: '请选择内存上限', trigger: 'blur'
                            }" style="width:110px; float:left; margin-left:10px;">
              <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                <el-option v-for="item in distributionform.mirrorConfigData.ramOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <!-- <el-form-item class="fl item-Gpu" label="GPU">
            <el-switch v-model="distributionform.mirrorConfigData.switchValue">
            </el-switch>
          </el-form-item> -->
        </el-form-item>
        <!-- 镜像配置 -->
        <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
          <div class="virtual-step">
            <ul>
              <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li>
            </ul>
          </div>
        </el-form-item>
        <div class="item-node" v-if="distributionform.resource == 2">
          <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options1" v-model="distributionform.optionsValue1" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options2" v-model="distributionform.optionsValue2" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options3" v-model="distributionform.optionsValue3" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options4" v-model="distributionform.optionsValue4" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options5" v-model="distributionform.optionsValue5" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
          <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
            <el-cascader :options="distributionform.options6" v-model="distributionform.optionsValue6" :show-all-levels="false" @change="handleItemChange"></el-cascader>
          </el-form-item>
        </div>
      </el-form>
      <div class="distribution-item" v-if="distributionform.distributionData">
        <div class="jx-course-box">
          <img :src="distributionform.distributionData.iconUrl" />
          <span v-text="distributionform.distributionData.imageName"></span>
        </div>
        <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="DistributionFormSave('distributionform')">保 存</el-button>
      </div>
    </el-dialog>
    <!-- 初始化弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
        <div class="dialog-content">
            <p>初始化会丢失文件、数据，确定要初始化吗?</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
            <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import mavonEditor from "../../../components/mavonEditor";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import Time from "../../../components/Time";
export default {
  components: {
    mavonEditor,
    swiper,
    swiperSlide,
    Time
  },
  data() {
    return {
       // 浏览器分辨率
      ScreenSigma: '',
      //取searchForm
      itemBankSearchForm: this.$localstorage.getLocalStorage("searchForm"),
      //取itemBankName
      itemBankName: this.$localstorage.getLocalStorage("itemBankName"),
      // 编辑试题data
      resData: "",

      //桌面loading
      deskLoading: false,
      deskLoadingText: "桌面加載中",

      contentLoading: null,
      // 课程ID
      courseId: "",
      // 章节ID
      chapterId: "",
      // 题目id
      questionId: "",
      // 课程名称
      courseName: "",
      // 虚机信息
      // VirtualMachineInfo: '',
      // 虚机全屏fullScreen
      fullScreen: false,
      // 虚机地址
      VirtualMachineUrl: "",
      VirtualMachineUrlArr: [],
      // 虚机当前ID数组
      VirtualMachineIdArr: [],
      // 虚机当前容器ID
      VirtualMachineId: "",
      // 虚机当前镜像ID
      VirtualImageId: "",
      iframeHeight: "",
      // 虚机切换导航列表
      virtualMachineNavList: [],
      // 虚机导航列表index
      MachineNavTabIndex: "0",
      // 虚拟机id
      containerId: "",
      toolbarsMav: {
        bold: true, // 粗体
        italic: false, // 斜体
        header: true, // 标题
        //underline: true, // 下划线
        //strikethrough: true, // 中划线
        //mark: true, // 标记
        //superscript: true, // 上角标
        //subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        help: true, // 帮助
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true, // 预览
        fullscreen: true // 全屏编辑
      },

      // 重选配置弹窗
      dialogDistributionFormVisible: false,
      distributionform: {
        // 类型
        resource: 1,
        // 伪分布数组
        distributedData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
          switchValue: false
        },
        // 镜像配置
        mirrorConfigData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
          switchValue: false
        },
        // 主节点
        nodeMianData: {
          // cpu配置
          cpuOptions: [
            {
              value: "1",
              label: "1核"
            },
            {
              value: "2",
              label: "2核"
            },
            {
              value: "4",
              label: "4核"
            },
            {
              value: "6",
              label: "6核"
            },
            {
              value: "8",
              label: "8核"
            },
            {
              value: "10",
              label: "10核"
            }
          ],
          cpuValue: "",
          ramOptions: [
            {
              value: "1",
              label: "1G"
            },
            {
              value: "2",
              label: "2G"
            },
            {
              value: "4",
              label: "4G"
            },
            {
              value: "6",
              label: "6G"
            },
            {
              value: "8",
              label: "8G"
            },
            {
              value: "10",
              label: "10G"
            },
            {
              value: "12",
              label: "12G"
            },
            {
              value: "14",
              label: "14G"
            },
            {
              value: "16",
              label: "16G"
            },
            {
              value: "32",
              label: "32G"
            },
            {
              value: "48",
              label: "48G"
            },
            {
              value: "64",
              label: "64G"
            }
          ],
          ramValue: "",
          // GPU
          switchValue: false
        },
        options0: [],
        optionsValue0: [],
        options1: [],
        optionsValue1: [],
        options2: [],
        optionsValue2: [],
        options3: [],
        optionsValue3: [],
        options4: [],
        optionsValue4: [],
        options5: [],
        optionsValue5: [],
        options6: [],
        optionsValue6: [],
        options7: [],
        optionsValue7: [],
        virtualStepList: [{ value: 2 }, { value: 4 }, { value: 6 }],
        virtualStepCurrent: 2,
        // 镜像列表数据
        distributionData: ""
      },
      // 镜像保存弹窗轮播组件data
      iconListData: "",
      swiperDialogOption: {
        slidesPerView: 5,
        spaceBetween: 24,
        initialSlide: 1,
        loop: false,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      // 镜像保存弹窗
      dialogMirrorInfo: false,
      // 镜像弹窗保存方式是否显示
      saveWayStatus: false,
      // 镜像保存OR创建
      VirtualSelf: "",
      // 镜像保存表单
      MirrorForm: {
        // 镜像名称
        MirrorName: "",
        // 保存镜像方式
        saveWay: 1,
        // 镜像名称长度
        MirrorNameNum: 20,
        // 镜像简介
        MirrorDesc: "",
        // 镜像简介长度
        MirrorDescNum: 200,
        // 选中的镜像图标ID
        iconId: "",
        // 镜像ID
        imageId: ""
      },
      MirrorFormRules: {
        MirrorName: [
          { required: true, message: "请输入镜像名称", trigger: "blur" }
        ],
        MirrorDesc: [
          { required: true, message: "请输入镜像简介", trigger: "blur" }
        ]
      },
      // 关闭分享
      dialogCloseShare: false,
      // 实验截图
      dialogScreenshot: false,
      dialogScreenshotCopyUrl: '',
      // 实验截图url
      dialogScreenshotUrl: "",
      // // 编辑环境
      // dialogEdit: true,
      // 编辑环境拖拽
      dialogEditDrag: false,
      // 编辑弹窗问题
      dialogEditorAnswer: "",
      // sftp
      dialogSftp: false,
      // Sftp ip
      sftpIp: "",
      // 剪切板dialog
      dialogCut: false,
      cutData: {
        cutRuleForm: {
          desc: "",
          descNum: 20000
        },
        cutRules: {
          desc: [{ required: true, message: "请填写内容", trigger: "blur" }]
        }
      },
      // 文件上传dialog
      dialogFileUpload: false,
      FileUploadForm: {
        fileName: "",
        versionFile: ""
      },
      FileUploadRules: {
        versionFile: [
          { required: true, message: "请上传文件", trigger: "blur" }
        ]
      },
      val: "123",
      // 虚机右侧导航
      mirrorRightWidth: 0,

      // 用户退出删除虚机socket
      UserOutWebsock: null,
      UserOutWebsockOver: null,

      // 初始化弹窗
     dialogInitVirtual: false,
     // 错误提示
    mirrorIframeTip: false,
    mirrorIframeTipText: ''
    };
  },
  created() {
    let self = this;
    // 课程ID
    self.courseId = self.$localstorage.getLocalStorage("setCourseId");
    // 章节ID
    self.chapterId = self.$localstorage.getLocalStorage(
      "chapterInfoData"
    ).chapterId;
    // 题目id
    self.questionId = self.$localstorage.getLocalStorage("questionId");
    self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
    self.$nextTick(function() {
      self.iframeHeight = $(window).height() - 60
        $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
        $('.jx-virtual-machine-main').height(self.iframeHeight)
        $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
        window.onresize = function () {
            if(self.fullScreen){
                $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                setTimeout(() => {
                    $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                }, 1000);
            }else{
                self.iframeHeight = $(window).height() - 60
                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * self.iframeHeight)
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            }
        }
    //   if (window.screen.width <= 1280) {
    //     self.fullScreen = true;
    //     $(".step-main-mirror").width(
    //       $(window).width() / self.iframeHeight * self.iframeHeight
    //     );
    //     setTimeout(() => {
    //       $(".mirror-iframe").width($(".step-main-mirror").width());
    //     }, 1000);
    //   }
      // 设置编辑器高度
      //   $(".step-main-editor .v-note-wrapper").css({
      //     height: $(window).height() - 440 + "px",
      //     "z-index": "1"
      //   });
    });

    // 通过id获取题目信息
    self.getRowData();

    // 初始化进入实验
    self.InitExperiment(0);

    // 初始化socket
    // self.InitWebSocket()

    // 初始化头部信息
    self.InitHeaderInfo();


  },
  mounted() {
    let self = this;
    self.$nextTick(() => {
      self.$refs.question.toolbars = self.toolbarsMav;
    });
  },
  methods: {
    // 通知webSocket
    InitWebSocket() {
      const wsuri = "ws://172.16.100.182:9999/tes/global";
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.over = () => {
        this.websock.close();
      };
    },
    websocketonopen() {
      console.log("open sucess");
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      let redataJson = {};
    },
    // 用户退出删除虚机socket
    InitUserOutWebSocket() {
      let self = this;
      let hostname = window.location.host;
      const wsuri =
        "ws://" +
        hostname +
        "/tes/ws/image-allocation/question/" +
        self.questionId;
      self.UserOutWebsock = new WebSocket(wsuri);
      self.UserOutWebsock.onopen = self.UserOutwebsocketonopen;
      self.UserOutWebsock.onmessage = self.UserOutwebsocketonmessage;
      self.UserOutWebsockOver = () => {
        self.UserOutWebsock.close();
      };
    },
    UserOutwebsocketonopen() {
      console.log("open sucess");
    },
    UserOutwebsocketonmessage() {
      const redata = JSON.parse(e.data);
      let redataJson = {};
    },
    // 通过id获取题目信息
    getRowData() {
      let self = this;

      self.$http
        .get(
          "/tes/course/" +
            self.courseId +
            "/businessType/1/question-repository/question/" +
            self.questionId
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.resData = res.data;
            self.$nextTick(() => {
              self.$refs.answer.toolbars = self.toolbarsMav;
            });
            //   console.log(that.resData,11111);
            //回填
            // if(res.data){
            //     self.$refs.question.value = res.data.content
            // }
            self.$nextTick(() => {
              self.$refs.question.changeVal(res.data.content);
              self.$refs.answer.changeVal(res.data.answer[0].content);
              // self.$refs.question.value = res.data.content
            });

            // self.$refs.question.value = res.data.content
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 提交验证
    reQuestion() {
      let self = this;
      let resData = self.resData;
      // console.log(resData,111);
      if (resData.content === "") {
        self.$message.error("请填写题干");
        return false;
      }
      if (resData.answer[0].content === "") {
        self.$message.error("请填写备选答案");
        return false;
      }
      return true;
    },
    // 修改试题
    editQuestion(tag) {
      // tag 1. 左侧修改试题 2.修改试题弹窗
      let self = this;
      // let rowId = that.$localstorage.getLocalStorage("questionId");
      // self.questionId

      if (tag == 1) {
        self.resData.content = self.$refs.question.value;
        self.resData.htmlContent = self.$refs.question.getRender();
        self.resData.answer[0].content = self.$refs.answer.value;
        self.resData.answer[0].htmlContent = self.$refs.answer.getRender();
      } else if (tag == 2) {
        self.resData.content = self.$refs.EditQuestionDialog.value;
        self.resData.htmlContent = self.$refs.EditQuestionDialog.getRender();
        self.resData.answer[0].content = self.$refs.EditAnswerDialog.value;
        self.resData.answer[0].htmlContent = self.$refs.EditAnswerDialog.getRender();
      }
      // self.resData.content = self.$refs.question.value;
      let isNull = self.reQuestion();
      if (!isNull) {
        return;
      }
      self.$http
        .put(
          "/tes/course/" +
            self.courseId +
            "/businessType/1/question-repository/question/" +
            self.questionId,
          self.resData
        )
        .then(response => {
          // console.log("成功1");
          // console.log(res);
          let res = response.data;
          if (res.code == "200") {
            self.$message({
              message: "修改成功",
              type: "success"
            });
            // self.questionId = res.data;
            if (tag == 2) {
              // 重新初始化编辑试题
              // self.resData.content = self.$refs.EditQuestionDialog.value;
              // self.$refs.question.value = self.resData.content

              self.getRowData();
            }
            // fn();
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 退出虚机
    DropoutVirtual() {
      let self = this;
      self
        .$confirm("确定退出虚机吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          //self.$router.go(-1);
          // self.$router.push({
          //   path: "/Teaching/Course/CreativeCourse/addExperimental",
          //   query: {
          //     rowId: self.questionId
          //   }
          // });
          self.$router.push({
            name: self.itemBankName,
            params: {
              searchForm: self.itemBankSearchForm
            }
          });
        })
        .catch(() => {});
    },
    // 初始化头部信息
    InitHeaderInfo() {
      let self = this;
      self.$http
        .get("/tes/course/" + self.courseId + "/chapter/0")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            // 课程名称
            self.courseName = res.data.courseName;
            // // 章节名称
            // self.chapterName = res.data.chapterName
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化进入实验
    InitExperiment(index) {
      // index 虚机index
      let self = this;
      self.fullScreen = false;

      self.deskLoading = true;
      self.deskLoadingText = "桌面加載中";
      self.VirtualMachineUrl = "";
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = [];
      self.virtualMachineNavList = [];
      self.$http
        .get(
          "/tes/image-allocation/question/" + self.questionId + "/experiment"
        )
        .then(response => {
          let res = response.data;

          if (res.code == "200") {
            // 初始化虚拟机信息
            // self.VirtualMachineInfo = res.data
            self.mirrorIframeTip = false
            setTimeout(() => {
              self.iframeHeight = $(window).height() - 60;
              $(".mirror-iframe, .step-main-mirror").width(
                1024 / 768 * ($(window).height() - 60)
              );
              $(".jx-virtual-machine-main").height(self.iframeHeight);
              $(".step-main-content").width(
                $(window).width() - $(".step-main-mirror").width()
              );
            }, 800);

            // 虚机容器ID
            self.VirtualMachineId = res.data[index].containerId;
            // 虚机镜像id
            self.VirtualImageId = res.data[index].imageId;

            self.fullScreen = false;
            let fullData = [];
            for (let i = 0; i < res.data.length; i++) {
              self.VirtualMachineIdArr.push(res.data[i].containerId);
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(res.data[i].containerRole);
              // 如果含有全屏状态
            //   if (res.data[i].fullScreen) {
            //     fullData.push(res.data[i].containerId);
            //     self.VirtualFullScreen(1, fullData);
            //   }
                fullData.push(res.data[i].containerId);
            }
            if (res.data[0].fullScreen) {
                self.VirtualFullScreen(1,fullData)
            }
            setTimeout(() => {
                // 虚机地址默认设置主节点
                self.VirtualMachineUrl = res.data[index].desktopUrl;

                // 虚机地址数组
                self.VirtualMachineUrlArr = res.data
                if(self.VirtualMachineUrlArr.length > 0){
                    // 用户退出删除虚机socket
                    self.InitUserOutWebSocket();
                }
              self.deskLoading = false;
              if(self.ScreenSigma < 1.44){
                    self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                        closeOnClickModal: false
                    }).then(() => {
                        self.VirtualFullScreen(2)
                    })
                }
            }, 800);
          }else{
            // self.deskLoading = false
            // self.$message.error(res.message)
            // 错误提示
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
        }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 虚机导航列表切换
    MachineNavTab2(index, item) {
      let self = this;
      self.MachineNavTabIndex = index;

      self.VirtualMachineId = item.containerId

      self.VirtualImageId = item.imageId;
      // 重新初始化进入实验
    //   self.InitExperiment(index);
    },
    // 刷新虚机
    refreshVirtual(index) {
      let self = this;
      self.MachineNavTabIndex = index;
      // 关闭手册拖拽弹窗
      self.dialogEditDrag = false;
      // 重新初始化进入实验
    //   self.InitExperiment(index);
        self.deskLoading = true;
        self.deskLoadingText = "桌面加載中";
        self.VirtualMachineUrl = "";
        self.VirtualMachineUrlArr = []
        // 清空虚机切换列表导航集合
        self.VirtualMachineIdArr = [];
        self.virtualMachineNavList = [];
      self.$http
        .get(
          "/tes/image-allocation/question/" + self.questionId + "/experiment"
        )
        .then(response => {
          let res = response.data;

          if (res.code == "200") {
              self.mirrorIframeTip = false
              if(res.data[0].fullScreen){
                    self.fullScreen = true;
                }
            // 初始化虚拟机信息
            // self.VirtualMachineInfo = res.data
            // 虚机地址默认设置主节点
            self.VirtualMachineUrl = res.data[index].desktopUrl;

            // 虚机地址数组
            self.VirtualMachineUrlArr = res.data
            // 虚机容器ID
            self.VirtualMachineId = res.data[index].containerId;
            // 虚机镜像id
            self.VirtualImageId = res.data[index].imageId;

            let fullData = [];
            for (let i = 0; i < res.data.length; i++) {
              self.VirtualMachineIdArr.push(res.data[i].containerId);
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(res.data[i].containerRole);
              // 如果含有全屏状态
            //   if (res.data[i].fullScreen) {
            //     fullData.push(res.data[i].containerId);
            //     self.VirtualFullScreen(1, fullData);
            //   }
                fullData.push(res.data[i].containerId);
            }
            if(!res.data[0].fullScreen){
                self.fullScreen = false;
                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60;
                    $(".mirror-iframe, .step-main-mirror").width(
                    1024 / 768 * ($(window).height() - 60)
                    );
                    $(".jx-virtual-machine-main").height(self.iframeHeight);
                    $(".step-main-content").width(
                    $(window).width() - $(".step-main-mirror").width()
                    );
                }, 800);
            }
            self.deskLoading = false;
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化虚机
    InitVirtual() {
      let self = this
      self.dialogInitVirtual = true
      // 关闭手册拖拽弹窗
      self.dialogEditDrag = false;
      self
        .$confirm("初始化会丢失文件、数据，确定要初始化吗?", "初始化", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
           self.MachineNavTabIndex = 0
           self.VirtualMachineUrl = ''
           self.VirtualMachineUrlArr = []
           self.VirtualMachineIdArr = []
           self.virtualMachineNavList = []
          self.fullScreen = false;

          self.deskLoading = true;
          self.deskLoadingText = "初始化中";
          self.$http
            .get(
              "/tes/image-allocation/question/" +
                self.questionId +
                "/experiment/init"
            )
            .then(response => {
              let res = response.data;
              if (res.code == "200") {
                // 初始化虚拟机信息
                // self.VirtualMachineInfo = res.data

                setTimeout(() => {
                  self.iframeHeight = $(window).height() - 60;
                  $(".mirror-iframe, .step-main-mirror").width(
                    1024 / 768 * ($(window).height() - 60)
                  );
                  $(".jx-virtual-machine-main").height(self.iframeHeight);
                  $(".step-main-content").width(
                    $(window).width() - $(".step-main-mirror").width()
                  );
                }, 800);
                // self.deskLoading = false;


                // 虚机ID
                self.VirtualMachineId = res.data[index].containerId;

                // 镜像ID初始化
                self.VirtualImageId = res.data[index].imageId;
                let fullData = [];
                for (let i = 0; i < res.data.length; i++) {
                  self.VirtualMachineIdArr.push(res.data[i].containerId);
                  // 虚机切换列表导航集合
                  self.virtualMachineNavList.push(res.data[i].containerRole);
                  // 如果含有全屏状态
                  if (res.data[i].fullScreen) {
                    fullData.push(res.data[i].containerId);
                    self.VirtualFullScreen(1, fullData);
                  }
                }

                // self.$message({
                //   type: "success",
                //   message: "初始化成功!"
                // });
                // if(self.ScreenSigma < 1.44){
                //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //         type: 'warning',
                //         closeOnClickModal: false
                //     }).then(() => {
                //         self.VirtualFullScreen(2)
                //     })
                // }
                setTimeout(() => {
                    // 虚机地址默认设置主节点
                    self.VirtualMachineUrl = res.data[index].desktopUrl;

                    self.VirtualMachineUrlArr = res.data
                    self.deskLoading = false
                    self.$message({
                        type: 'success',
                        message: '初始化成功!'
                    })
                    if(self.ScreenSigma < 1.44){
                        self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            closeOnClickModal: false
                        }).then(() => {
                            self.VirtualFullScreen(2)
                        })
                    }
                }, 5000);
              } else {
                self.deskLoading = false;
                self.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    DialogInitVirtualSave(index){
        let self = this
        // 关闭手册拖拽弹窗
        self.dialogEditDrag = false;
        self.MachineNavTabIndex = 0
        self.VirtualMachineUrl = ''
        self.VirtualMachineUrlArr = []
        self.VirtualMachineIdArr = []
        self.virtualMachineNavList = []
        self.fullScreen = false;

        self.dialogInitVirtual = false
        self.deskLoading = true;
        self.deskLoadingText = "初始化中";
        self.$http.get("/tes/image-allocation/question/" + self.questionId + "/experiment/init").then(response => {
            let res = response.data;
            if (res.code == "200") {
                // 初始化虚拟机信息
                // self.VirtualMachineInfo = res.data
                self.mirrorIframeTip = false
                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60
                    $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                    $('.jx-virtual-machine-main').height(self.iframeHeight)
                    $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                }, 800);
                // self.deskLoading = false;

                // 虚机地址默认设置主节点
                self.VirtualMachineUrl = res.data[index].desktopUrl;

                self.VirtualMachineUrlArr = res.data
                // 虚机ID
                self.VirtualMachineId = res.data[index].containerId;

                // 镜像ID初始化
                self.VirtualImageId = res.data[index].imageId;
                let fullData = [];
                for (let i = 0; i < res.data.length; i++) {
                    self.VirtualMachineIdArr.push(res.data[i].containerId);
                    // 虚机切换列表导航集合
                    self.virtualMachineNavList.push(res.data[i].containerRole);
                    // 如果含有全屏状态
                    if (res.data[i].fullScreen) {
                    fullData.push(res.data[i].containerId);
                    self.VirtualFullScreen(1, fullData);
                    }
                }

                // self.$message({
                //   type: "success",
                //   message: "初始化成功!"
                // });
                // if(self.ScreenSigma < 1.44){
                //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //         type: 'warning',
                //         closeOnClickModal: false
                //     }).then(() => {
                //         self.VirtualFullScreen(2)
                //     })
                // }
                setTimeout(() => {
                    self.deskLoading = false
                    self.$message({
                        type: 'success',
                        message: '初始化成功!'
                    })
                    if(self.ScreenSigma < 1.44){
                        self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            closeOnClickModal: false
                        }).then(() => {
                            self.VirtualFullScreen(2)
                        })
                    }
                }, 5000);
            } else {
                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60
                    $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                    $('.jx-virtual-machine-main').height(self.iframeHeight)
                    $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                }, 800);
                self.mirrorIframeTip = true
                self.mirrorIframeTipText = res.message
                self.deskLoading = false
            }
        }).catch(err => {
            console.log(err);
        });
    },
    // 全屏
    VirtualFullScreen(index, fullData) {
      let self = this;
      const loading = self.$loading({
            lock: true,
            text: '虚机切换中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
      // self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/display?length='+$(window).width()+'&width='+self.iframeHeight).then(response => {
      let data = {};
      if (index == 1) {
        data = {
          containerIds: fullData,
          length: "1024",
          width: "768",
          fullScreen: false
        };
      } else if (index == 2) {
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: window.screen.availWidth,
          width: self.iframeHeight,
          fullScreen: true
        };
      } else if (index == 3) {
        // 退出全屏
        // 关闭手册拖拽弹窗
        self.dialogEditDrag = false;
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: "1024",
          width: "768",
          fullScreen: false
        };
      }
      self.$http
        .post("/tes/experiment/container/display", data)
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
              // 关闭loading
               loading.close()
            if (index == 2) {
              self.fullScreen = true;
              $(".step-main-mirror").width(
                $(window).width() / self.iframeHeight * self.iframeHeight
              );
              setTimeout(() => {
                $(".mirror-iframe").width($(".step-main-mirror").width() - 1);
              }, 1000);
            } else if (index == 3 || index == 1) {
              self.fullScreen = false;
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60;
                $(".mirror-iframe, .step-main-mirror").width(
                  1024 / 768 * ($(window).height() - 60)
                );
                $(".jx-virtual-machine-main").height(self.iframeHeight);
                $(".step-main-content").width($(window).width() - $('.step-main-mirror').width())
              }, 1000);
            }
          } else {
              // 关闭loading
              loading.close()
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 图标切换
    IconChange(id) {
      let self = this;
      self.MirrorForm.iconId = id;
    },
    // 镜像保存radio切换
    MirrorRadioChange(){
        let self = this
        if(self.MirrorForm.saveWay == 1){
            self.$http.get('/tes/image-allocation/image/'+self.VirtualImageId).then(response => {
                let res = response.data
                if(res.code == '200'){
                    let iconIdIndex
                    self.MirrorForm.MirrorName = res.data.imageName
                    self.MirrorForm.MirrorNameNum = 20 - self.MirrorForm.MirrorName.length
                    self.MirrorForm.iconId = res.data.icon
                    iconIdIndex = self.indexOfFn(self.iconListData,self.MirrorForm.iconId)
                    self.MirrorForm.MirrorDesc = res.data.description
                    self.MirrorForm.MirrorDescNum = 200 - self.MirrorForm.MirrorDesc.length
                    self.swiperDialogOption =  {
                        slidesPerView: 5,
                        spaceBetween: 24,
                        initialSlide: iconIdIndex,
                        loop: false,
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev',
                        },
                    }
                }else{
                    self.$message.error(res.message)
                }
            }).catch(err => {
                console.log(err)
            })
        }else{
            self.MirrorForm.MirrorName = ''
            self.MirrorForm.MirrorNameNum = 20
            self.MirrorForm.iconId = ''
            self.MirrorForm.MirrorDesc = ''
            self.MirrorForm.MirrorDescNum = 200
            self.swiperDialogOption.initialSlide = 1
        }
    },
    // 镜像保存弹窗
    VirtualSave() {
      let self = this;
      self.MirrorForm.MirrorName = ''
    self.MirrorForm.MirrorNameNum = 20
    self.MirrorForm.iconId = ''
    self.MirrorForm.MirrorDesc = ''
    self.MirrorForm.MirrorDescNum = 200
    self.swiperDialogOption.initialSlide = 1
    self.iconListData = ''
      self.$http
        .get("/tes/image/icon")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.iconListData = res.data;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
      self.$http
        .get("/tes/image-allocation/image/" + self.VirtualImageId + "/self")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            // 保存镜像方式radio状态赋值
            self.saveWayStatus = res.data ? true : false;

            // 判断保存或创建
            if(res.data){
                // 镜像保存信息
                self.VirtualInfo()
            }else{
                self.dialogMirrorInfo = true
            }
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    VirtualInfo() {
      let self = this;
      self.$http
        .get("/tes/image-allocation/image/" + self.VirtualImageId)
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            let iconIdIndex
            self.MirrorForm.MirrorName = res.data.imageName
            self.MirrorForm.MirrorNameNum = 20 - self.MirrorForm.MirrorName.length
            self.MirrorForm.iconId = res.data.icon
            iconIdIndex = self.indexOfFn(self.iconListData,self.MirrorForm.iconId)
            self.MirrorForm.MirrorDesc = res.data.description
            self.MirrorForm.MirrorDescNum = 200 - self.MirrorForm.MirrorDesc.length
            self.swiperDialogOption =  {
                slidesPerView: 5,
                spaceBetween: 24,
                initialSlide: iconIdIndex,
                loop: false,
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            }
            self.dialogMirrorInfo = true
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    indexOfFn(arr,item){
        for(let i = 0; i < arr.length; i++){
            if(arr[i].icon == item){
                return i;
            }
        }
    },
    // 镜像名称
    MirrorNameInput() {
      let self = this;
      let MirrorTextLength = self.MirrorForm.MirrorName.length;
      self.MirrorForm.MirrorNameNum = 20 - MirrorTextLength;
    },
    // 镜像简介
    MirrorDescInput() {
      let self = this;
      let MirrorTextLength = self.MirrorForm.MirrorDesc.length;
      self.MirrorForm.MirrorDescNum = 200 - MirrorTextLength;
    },
    // 保存镜像保存
    MirrorFormSave(form) {
      let self = this;
      if (self.MirrorForm.saveWay == 1) {
        self.$refs[form].validate(valid => {
          if (valid) {
            self.$http
              .put("/tes/image-allocation/image" + self.VirtualImageId, {
                containerId: self.VirtualMachineId,
                imageName: self.MirrorForm.MirrorName,
                icon: self.MirrorForm.iconId,
                description: self.MirrorForm.MirrorDesc
              })
              .then(response => {
                let res = response.data;
                if (res.code == "200") {
                  // 重新赋值镜像ID
                  self.VirtualImageId = res.data;
                  // 重新配置镜像
                  self.singleVirtual();
                } else {
                  self.$message.error(res.message);
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        });
      } else {
        self.$refs[form].validate(valid => {
          if (valid) {
            self.$http
              .post("/tes/image-allocation/image", {
                containerId: self.VirtualMachineId,
                imageName: self.MirrorForm.MirrorName,
                icon: self.MirrorForm.iconId,
                description: self.MirrorForm.MirrorDesc
              })
              .then(response => {
                let res = response.data;
                if (res.code == "200") {
                  // 重新赋值镜像ID
                  self.VirtualImageId = res.data;
                  // 重新配置镜像
                  self.singleVirtual();
                } else {
                  self.$message.error(res.message);
                }
              })
              .catch(err => {
                console.log(err);
              });
          }
        });
      }
    },
    // 重新配置镜像
    singleVirtual() {
      let self = this;
      self.$http
        .put("/tes/image-allocation/question/" + self.questionId, {
          imageId: self.VirtualImageId,
          containerId: self.VirtualMachineId
        })
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.dialogMirrorInfo = false;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 修改镜像保存
    ModifyMirrorFormSave(form) {
      let self = this;
      self.$refs[form].validate(valid => {
        if (valid) {
          if (self.MirrorForm.iconId == "") {
            self.$message.error("请选择镜像图标");
            return;
          }
          if (!self.saveWayStatus) {
            self.CreatedMirrorForm();
            return;
          }
          if (self.MirrorForm.saveWay == 1) {
            self.contentLoading = self.$loading({
              lock: true,
              text: "镜像保存中",
              spinner: "el-icon-loading",
              background: "rgba(0, 0, 0, 0.7)"
            });
            self.$http
              .put("/tes/image-allocation/image/" + self.VirtualImageId, {
                containerId: self.VirtualMachineId,
                imageName: self.MirrorForm.MirrorName,
                icon: self.MirrorForm.iconId,
                description: self.MirrorForm.MirrorDesc
              })
              .then(response => {
                let res = response.data;
                if (res.code == "200") {
                  self.$message({
                    message: "保存成功",
                    type: "success"
                  });
                  self.contentLoading.close();
                  self.dialogMirrorInfo = false;
                } else {
                  self.contentLoading.close();
                  self.dialogMirrorInfo = false;
                  self.$message.error(res.message);
                }
              })
              .catch(err => {
                console.log(err);
              });
          } else {
            // 镜像保存创建
            self.CreatedMirrorForm();
          }
        }
      });
    },
    // 镜像保存创建
    CreatedMirrorForm() {
      let self = this;
      self.contentLoading = self.$loading({
        lock: true,
        text: "镜像创建中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      self.$http
        .post("/tes/image-allocation/image", {
          containerId: self.VirtualMachineId,
          imageName: self.MirrorForm.MirrorName,
          icon: self.MirrorForm.iconId,
          description: self.MirrorForm.MirrorDesc
        })
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$message({
              message: "保存成功",
              type: "success"
            });
            self.VirtualImageId = res.data;

            self.singleVirtual();
            self.contentLoading.close();
            self.dialogMirrorInfo = false;
          } else {
            self.contentLoading.close();
            self.dialogMirrorInfo = false;
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 跳转到编辑实验镜像页
    VirtualLink() {
      let self = this;
      self.$http
        .get("/tes/image-allocation/image")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.distributionform.options0 = res.data;
            self.distributionform.options1 = res.data;
            self.distributionform.options2 = res.data;
            self.distributionform.options3 = res.data;
            self.distributionform.options4 = res.data;
            self.distributionform.options5 = res.data;
            self.distributionform.options6 = res.data;
            self.distributionform.options7 = res.data;
            // 显示分配镜像弹窗
            self.dialogDistributionFormVisible = true;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });

      self.$http
        .get("/tes/image-allocation/question/" + self.questionId)
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            if (res.data.allocated) {
              if (res.data.mode == 1) {
                self.distributionform.resource = res.data.mode;
                // 伪分布取值
                self.distributionform.distributedData.cpuValue = ""+res.data.cpu+"";
                self.distributionform.distributedData.ramValue = ""+res.data.ram+"";
                self.distributionform.distributedData.switchValue =
                  res.data.gpu;

                self.distributionform.optionsValue0 = [
                  res.data.image.imageSource,
                  res.data.image.imageId
                ];
                self.handleItemChange(self.distributionform.optionsValue0);
              } else if (res.data.mode == 2) {
                self.distributionform.resource = res.data.mode;
                // 主节点取值
                self.distributionform.nodeMianData.cpuValue = ""+res.data.cpu+"";
                self.distributionform.nodeMianData.ramValue = ""+res.data.ram+"";
                self.distributionform.nodeMianData.switchValue = res.data.gpu;

                self.distributionform.optionsValue7 = [
                  res.data.image.imageSource,
                  res.data.image.imageId
                ];
                // 从节点镜像配置
                self.distributionform.mirrorConfigData.cpuValue =
                  ""+res.data.slaveCpu+"";
                self.distributionform.mirrorConfigData.ramValue =
                  ""+res.data.slaveRam+"";
                self.distributionform.mirrorConfigData.switchValue =
                  res.data.slaveGpu;
                self.distributionform.virtualStepCurrent = res.data.slaveSize;
                self.$nextTick(() => {
                  if (res.data.slaveSize == 2) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId
                    ];
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId
                    ];
                  } else if (res.data.slaveSize == 4) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId
                    ];
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId
                    ];
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId
                    ];
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId
                    ];
                  } else if (res.data.slaveSize == 6) {
                    self.distributionform.optionsValue1 = [
                      res.data.slaveImages[0].imageSource,
                      res.data.slaveImages[0].imageId
                    ];
                    self.distributionform.optionsValue2 = [
                      res.data.slaveImages[1].imageSource,
                      res.data.slaveImages[1].imageId
                    ];
                    self.distributionform.optionsValue3 = [
                      res.data.slaveImages[2].imageSource,
                      res.data.slaveImages[2].imageId
                    ];
                    self.distributionform.optionsValue4 = [
                      res.data.slaveImages[3].imageSource,
                      res.data.slaveImages[3].imageId
                    ];
                    self.distributionform.optionsValue5 = [
                      res.data.slaveImages[4].imageSource,
                      res.data.slaveImages[4].imageId
                    ];
                    self.distributionform.optionsValue6 = [
                      res.data.slaveImages[5].imageSource,
                      res.data.slaveImages[5].imageId
                    ];
                  }
                });
                self.handleItemChange(self.distributionform.optionsValue7);
              }
            }
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //弹窗step切换
    AddClass(index) {
      let self = this;
      if(index != 2){
        return
    }
      self.distributionform.virtualStepCurrent = index;
    },
    // 分配镜像
    // 表单提交
    DistributionFormSave(formName, tag) {
      // tag标记1.保存 2.保存并跳转实验镜像
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          let data = {},
            slaveImageIdsArr = [];
          // data.chapterIds = self.chapterId
          data.mode = self.distributionform.resource;
          if (self.distributionform.resource == 1) {
            data.imageId = self.distributionform.optionsValue0[1]
              ? self.distributionform.optionsValue0[1]
              : "";
            data.cpu = self.distributionform.distributedData.cpuValue;
            data.ram = self.distributionform.distributedData.ramValue;
            data.gpu = self.distributionform.distributedData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择镜像");
              return;
            }
          } else if (self.distributionform.resource == 2) {
            data.imageId = self.distributionform.optionsValue7[1]
              ? self.distributionform.optionsValue7[1]
              : "";
            data.cpu = self.distributionform.nodeMianData.cpuValue;
            data.ram = self.distributionform.nodeMianData.ramValue;
            data.gpu = self.distributionform.nodeMianData.switchValue;
            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue;
            data.slaveRam = self.distributionform.mirrorConfigData.ramValue;
            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue;

            if (data.imageId == "") {
              self.$message.error("请选择主节点镜像");
              return;
            }

            if (self.distributionform.virtualStepCurrent == 2) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 4) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
            } else if (self.distributionform.virtualStepCurrent == 6) {
              slaveImageIdsArr.push(self.distributionform.optionsValue1[1]);
              if (self.distributionform.optionsValue1[1] == undefined) {
                self.$message.error("请选择从节点1镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue2[1]);
              if (self.distributionform.optionsValue2[1] == undefined) {
                self.$message.error("请选择从节点2镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue3[1]);
              if (self.distributionform.optionsValue3[1] == undefined) {
                self.$message.error("请选择从节点3镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue4[1]);
              if (self.distributionform.optionsValue4[1] == undefined) {
                self.$message.error("请选择从节点4镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue5[1]);
              if (self.distributionform.optionsValue5[1] == undefined) {
                self.$message.error("请选择从节点5镜像");
                return;
              }
              slaveImageIdsArr.push(self.distributionform.optionsValue6[1]);
              if (self.distributionform.optionsValue6[1] == undefined) {
                self.$message.error("请选择从节点6镜像");
                return;
              }
            }
            data.slaveImageIds = slaveImageIdsArr;
          }
          self.$http
            .post("/tes/image-allocation/question/" + self.questionId, data)
            .then(response => {
              let res = response.data;
              if (res.code == "200") {
                // self.$message({
                //     message: '重选配置成功',
                //     type: 'success'
                // })

                // 镜像分配弹窗隐藏
                self.dialogDistributionFormVisible = false;
                // 配置成功调用初始化
                self.InitConfigVirtual(0);
              } else {
                self.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    InitConfigVirtual(index) {
      let self = this;
      self.MachineNavTabIndex = 0
    self.VirtualMachineUrl = ''
    // 虚机地址数组
    self.VirtualMachineUrlArr = []
    self.VirtualMachineIdArr = []
    self.virtualMachineNavList = []
      self.fullScreen = false;
      self.deskLoading = true;
      self.deskLoadingText = "重选配置中";
      self.$http
        .get(
          "/tes/image-allocation/question/" +
            self.questionId +
            "/experiment/init"
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            // 初始化虚拟机信息
            // self.VirtualMachineInfo = res.data
            self.mirrorIframeTip = false
            setTimeout(() => {
              self.iframeHeight = $(window).height() - 60;
              $(".mirror-iframe, .step-main-mirror").width(
                1024 / 768 * ($(window).height() - 60)
              );
              $(".jx-virtual-machine-main").height(self.iframeHeight);
              $(".step-main-content").width(
                $(window).width() - $(".step-main-mirror").width()
              );
            }, 800);
            self.deskLoading = false;

            // 虚机地址默认设置主节点
            self.VirtualMachineUrl = res.data[index].desktopUrl;
            // 虚机地址数组
            self.VirtualMachineUrlArr = res.data
            // 虚机ID
            self.VirtualMachineId = res.data[index].containerId;

            // 镜像ID初始化
            self.VirtualImageId = res.data[index].imageId;
            let fullData = [];
            for (let i = 0; i < res.data.length; i++) {
              self.VirtualMachineIdArr.push(res.data[i].containerId);
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(res.data[i].containerRole);
              // 如果含有全屏状态
              if (res.data[i].fullScreen) {
                fullData.push(res.data[i].containerId);
                self.VirtualFullScreen(1, fullData);
              }
            }
            self.$message({
              message: "重选配置成功",
              type: "success"
            });
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    handleItemChange(data) {
      let self = this;
      if (data[1]) {
        self.$http
          .get("/tes/image-allocation/image/" + data[1])
          .then(response => {
            let res = response.data;
            if (res.code == "200") {
              self.distributionform.distributionData = res.data;
            } else {
              self.$message.error(res.message);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    // stfp工具
    SftpConfig() {
      let self = this;
      self.$http
        .get("/tes/experiment/container/" + self.VirtualMachineId + "/ftp")
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            let sftpArr = res.data.split("@");
            self.sftpIp = sftpArr;
            self.dialogSftp = true;
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 剪贴板字符限制
    CutContentInput() {
      let self = this;
      let MirrorTextLength = self.cutData.cutRuleForm.desc.length;
      self.cutData.cutRuleForm.descNum = 20000 - MirrorTextLength;
    },
    // 剪切板弹窗
    CutDialog() {
      let self = this;
      self.dialogCut = true;
      self.cutData.cutRuleForm.descNum = 20000;
      self.cutData.cutRuleForm.desc = "";
    },
    CutCloseDialog() {
      let self = this;
      self.$refs["cutRuleForm"].resetFields();
    },
    // 剪切板表单提交
    cutSubmitForm(formName) {
      let self = this;
      self.$refs[formName].validate(valid => {
        if (valid) {
          const loading = self.$loading({
            lock: true,
            text: "剪切文件提交中",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)"
          });
          self.$http
            .post(
              "/tes/experiment/container/" +
                self.VirtualMachineId +
                "/clipboard",
              {
                content: self.cutData.cutRuleForm.desc
              }
            )
            .then(response => {
              let res = response.data;
              if (res.code == "200") {
                loading.close();
                self.$message({
                  type: "success",
                  message: "保存成功!"
                });
                self.dialogCut = false;
              } else {
                loading.close();
                self.$message.error(res.message);
              }
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    },
    // 文件上传弹窗显示
    UploadFile() {
      let self = this;
      self.FileUploadForm.fileName = "";
      self.FileUploadForm.versionFile = "";
      self.dialogFileUpload = true;
      $("#version-file-upload").val("");
    },
    // 文件上传清除上传提示文本
    CloseFileUploadDialog() {
      let self = this;
      self.FileUploadForm.fileName = "";
      $("#version-file-upload").val("");
    },
    // 上传文件
    getFile($event) {
      let self = this;
      let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500;
      let fileType = $event.target.files[0].name;
      fileType = fileType.substring(
        fileType.lastIndexOf(".") + 1,
        fileType.length
      );
      if (!isLt2M) {
        self.$message.error("上传文件大小不能超过 500MB!");
        return false;
      }
      self.FileUploadForm.fileName = $event.target.files[0];
      self.FileUploadForm.versionFile = $event.target.files[0].name;
    },
    // 保存上传文件
    UploadSave(form) {
      let self = this;
      if (self.FileUploadForm.fileName == "") {
        self.$message.error("请上传文件");
        return;
      }
      self.contentLoading = self.$loading({
        lock: true,
        text: "文件上传中",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let formData = new FormData();
      formData.append("file", self.FileUploadForm.fileName);
      self.$http
        .post(
          "/tes/experiment/container/" + self.VirtualMachineId + "/upload",
          formData,
          { headers: { "Content-Type": "multipart/form-data" } }
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$message({
              message: "上传成功",
              type: "success"
            });
            self.dialogFileUpload = false;
            self.contentLoading.close();
            self.$refs[form].resetFields();
          } else {
            self.contentLoading.close();
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 实验截图
    ExperimentScreenshot() {
      let self = this;
      var vir = document.getElementById('VirtualMachineIframe' + self.VirtualMachineId)
      self.dialogScreenshotUrl = self
        .convertCanvasToImage(
          vir.contentWindow.document.getElementsByTagName("canvas")[0]
        )
        .getAttribute("src");

      self.$http.post('/tes/base64/file-save',{
            'base64Info' : self.dialogScreenshotUrl
        }).then(response => {
            let res = response.data
            if(res.code == '200'){
                self.dialogScreenshotCopyUrl = res.data
                self.dialogScreenshot = true
            }
        })
    },
    convertCanvasToImage(canvas) {
      let image = new Image();
      image.crossOrigin = "anonymous";
      image.src = canvas.toDataURL("image/png");
      return image;
    },
    // 实验截图复制
    dialogScreenshotCopy() {
      let self = this
        var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
        clipboard.on('success', e => {
            self.$message({
                message: '复制成功，请在编辑器粘贴',
                type: 'success'
            })
            self.dialogScreenshot = false
            e.clearSelection();
        })
        clipboard.on('error', e => {
            // 不支持复制
            console.log('该浏览器不支持自动复制')
            // 释放内存
            clipboard.destroy()
        })
    },
    // 实验截图保存下载图片
    dialogScreenshotSave() {
      let self = this;
      self.downloadFile("截图.png", self.dialogScreenshotUrl);
    },
    // 下载
    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
       aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
    },
    // base64转blob
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },

    // 编辑镜像弹窗
    EditDialog() {
      let self = this;
      self.dialogEditDrag = true;
      self.$nextTick(() => {
        self.$refs.EditQuestionDialog.toolbars = self.toolbarsMav;
        self.$refs.EditAnswerDialog.toolbars = self.toolbarsMav;
      });
      self.$http
        .get(
          "/tes/course/" +
            self.courseId +
            "/businessType/1/question-repository/question/" +
            self.questionId
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.resData = res.data;
            self.dialogEditorAnswer = res.data.answer[0].content;
            //   console.log(that.resData,11111);
            //回填
            if (res.data) {
              self.$refs.EditQuestionDialog.value = self.resData.content;
              self.$refs.EditAnswerDialog.value =
                self.resData.answer[0].content;
            }
            // self.$nextTick(() => {
            //     self.$refs.EditQuestionDialog.value = self.resData.content
            // })
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //消息通知
    NoteSelect() {
      let self = this;
      // self.$http.
      // if(this.notesData.length == 0){
      //     return
      // }
      // if(this.noteBottom == -144){
      //     this.noteBottom = 28
      // }else{
      //     this.noteBottom = -144
      // }
    },
    greet(val) {
      this.val = val;
    },
    // 虚机右侧菜单显示隐藏
    MirrorArrowFn() {
      let self = this;
      if (self.mirrorRightWidth == -144) {
        self.mirrorRightWidth = 0;
      } else {
        self.mirrorRightWidth = -144;
      }
    }
  }
};
</script>


<style lang="scss" >
@import "./../../../styles/layout/color_variables";
#jx-examination-virtual-machine {
  position: relative;
  height: 100%;
  overflow: hidden;
  .tab-main {
    // padding: 20px;
    .jx-main-content {
      width: 100%;
      background: $white;
      padding: 20px;
      box-sizing: border-box;
    }
  }

  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      .el-button {
        width: 90px;
      }
    }
  }
  .jx-virtual-machine-header {
    height: 60px;
    line-height: 60px;
    background: #101937;
    color: $white;
    .jx-virtual-machine-header-logo {
      margin-left: 40px;
      font-size: 16px;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      margin-top: 30px;
    }
    .jx-virtual-machine-header-dropout {
      height: 60px;
      line-height: 60px;
      i {
        color: #fff;
        font-size: 20px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .jx-virtual-machine-nav {
      margin: 20px 0 0 30px;
      float: left;
      height: 40px;
      line-height: 40px;
      span {
        width: 90px;
        color: $white;
        cursor: pointer;
        text-align: center;
        border-radius: 5px 5px 0 0;
        transition: 0.3s;
        // &:hover{
        //     background: $white;
        //     color: #101937;
        // }
        &.active {
          background: $white;
          color: #101937;
        }
      }
    }
    .jx-virtual-machine-nav2 {
      width: 50%;
      float: right;
      @extend .jx-virtual-machine-nav;
    }
  }
  .jx-virtual-machine-main {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .step-main-content {
      height: 100%;
      background: #fff;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        width: 5px;
        height: 0;
      }

      &::-webkit-scrollbar-thumb {
        background: #c1c1c1;
      }
      .step-main-content-box {
        .step-main-editor {
          height: 300px;
          .v-note-wrapper {
            height: 100%;
          }
        }
      }
      .step-main-content-text {
        width: 100%;
        background: $white;
        margin-top: 10px;
        .display-hide-btn {
          float: right;
          margin: 10px 10px 20px 0;
        }
      }
      .step-main-btn-box {
        overflow: hidden;
        padding: 12px 16px 15px 15px;
        text-align: right;
        i {
          color: #385899;
          font-size: 16px;
          line-height: 16px;
          vertical-align: top;
          cursor: pointer;
        }
      }
      .step-main-btn-group {
        text-align: center;
        margin-top: 20px;
        button {
          width: 90px;
          &:first-child {
            // background: $btn-blue;
            // color: #fff;
            margin-right: 5px;
          }
        }
      }
    }
    .step-main-mirror {
      position: relative;
      width: 65%;
      height: 100%;
      // overflow-x: auto;
      // &::-webkit-scrollbar {
      //     width: 6px;
      // }
      // &::-webkit-scrollbar-thumb {
      //     background: #4d5368;
      //     border-radius: 6px;
      // }
      .mirror-iframe-tip{
            text-align: center;
            img{
                margin-top: 20%;
            }
            .mirror-iframe-tip-text{
                display: block;
                font-size: 16px;
                color: #727272;
                margin: 28px 0 18px;
            }
        }
      .step-main-mirror-dialog {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 144px;
        box-sizing: border-box;
        background: #2e2f33;
        transition: 0.3s;
        .step-main-mirror-dialog-block {
          height: 100%;
          overflow-x: scroll;
          padding: 0 24px;
          &::-webkit-scrollbar {
            width: 3px;
            height: 0;
          }

          &::-webkit-scrollbar-thumb {
            background: $white;
          }
        }
        .mirror-dialog-header {
          font-size: 14px;
          line-height: 18px;
          color: $white;
          padding: 20px 0;
          h2 {
            font-weight: normal;
            font-size: 16px;
            margin-bottom: 10px;
          }
          span {
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            vertical-align: bottom;
          }
        }
        .mirror-dialog-item {
          border-top: solid 1px rgba(255, 255, 255, 0.3);
          padding: 15px 0;
          .item-btn {
            position: relative;
            line-height: 40px;
            font-size: 14px;
            color: $white;
            span{
                cursor: pointer;
                &:hover{
                    color: #1277eb;
                }
            }
            i {
              // float: left;
              width: 22px;
              text-align: left;
              // margin-right: 5px;
              display: inline-block;
              vertical-align: -webkit-baseline-middle;
              &.icon-guanbifenxiang {
                font-size: 14px;
              }
              &:hover{
                color: #1277eb;
              }
            }
          }
        }
      }
      .step-main-mirror-arrow {
        position: absolute;
        top: 20%;
        right: 144px;
        width: 22px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #2e2f33;
        border-radius: 4px 0 0 4px;
        padding: 5px 0;
        cursor: pointer;
        transition: 0.2s;
        div {
          color: #fff;
          font-size: 14px;
          width: 22px;
          line-height: 26px;
          // &:after{
          //     content: '\003C';
          // }
          // &.active{
          //     &:after{
          //         content: '\003E';
          //     }
          // }
        }
      }
      .step-main-mirror-side {
        position: absolute;
        bottom: 50px;
        right: 150px;
        // width: 240px;
        height: 60px;
        background: #1c1f21;
        color: $white;
        text-align: center;
        border-radius: 5px;
        z-index: 2;
        li {
          float: left;
          width: 60px;
          height: 36px;
          display: block;
          font-size: 12px;
          margin-top: 14px;
          position: relative;
          cursor: pointer;
          border-right: solid 1px #353636;
          box-sizing: border-box;
          &:hover{
              color: #dfdfdf;
          }
          &:last-child {
            border-right: none;
          }
          .iconfont {
            display: block;
            margin-bottom: 2px;
            font-size: 20px;
          }
        }
      }
    }
  }
  //分享
  .dialog-share {
    .button-style {
      width: 90px;
    }

    .dialog-content {
      .share-item {
        width: 280px;
        height: 28px;
        line-height: 28px;
        margin: 0 auto;
        text-align: center;
        font-size: 14px;
        color: $title-gray;
        margin-top: 20px;
        span {
          float: left;
          width: 210px;
          border-right: solid 1px #e8e8e8;
          padding-right: 38px;
          text-align: right;
          box-sizing: border-box;
        }
        .el-switch {
          float: left;
          margin: 4px 0 0 30px;
        }
      }
    }
  }
  //分享桌面
  .dialog-share-desktop {
    .share-desktop-item {
      margin-bottom: 35px;
      &:last-child {
        margin-bottom: 0;
      }
      .item-label {
        float: left;
        width: 155px;
        height: 32px;
        line-height: 32px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 8px;
      }
    }
  }
  //实验截图
  .dialog-screenshot {
    .dialog-content {
      img {
        width: 763px;
        height: 440px;
      }
    }
  }
  //学生手册
  .dialog-handbook {
    p {
      font-size: 14px;
      color: $title-gray;
      text-align: center;
      line-height: 48px;
      span {
        font-size: 18px;
        font-weight: bold;
      }
    }
    .handbook-item {
      .item-label {
        float: left;
        width: 155px;
        height: 48px;
        line-height: 48px;
        text-align: right;
        font-size: 14px;
        color: $title-gray;
      }
      .el-radio-group {
        margin-top: 17px;
      }
    }
  }
  //手册拖拽
  .dialog-editor {
    position: absolute; /*定位*/
    top: 20%;
    left: 50%;
    width: 620px;
    height: 500px;
    overflow: hidden;
    .el-dialog__body{
        &::-webkit-scrollbar {
            width: 5px;
        }

        &::-webkit-scrollbar-thumb {
            background: #c1c1c1;
            border-radius: 2px;
        }
    }
    .v-note-wrapper {
      height: 100%;
    }
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      margin-top: 0 !important;
      .el-dialog__body {
        overflow: auto;
        .dialog-body {
          height: 318px;
        }
      }
    }
  }
  //sftp上传弹窗样式
  .sftp-dialog {
    .el-dialog__body {
      padding: 38px 50px 30px;
    }
    .sftp-content {
      .sftp-header {
        border-bottom: solid 2px #dfdfdf;
        padding-bottom: 25px;
        margin-bottom: 25px;
        p {
          span {
            color: #5281c6;
          }
        }
      }
      p {
        font-size: 16px;
        line-height: 30px;
      }
      .sftp-title {
        font-size: 16px;
        color: #333;
        font-weight: bold;
        margin-bottom: 15px;
      }
      .sftp-desc {
        p {
          span {
            padding: 5px 10px;
            border-radius: 5px;
            background: #eeeeee;
            font-size: 14px;
            margin: 0 5px;
          }
          i {
            margin-left: 5px;
            color: #5281c6;
            position: relative;
            &:last-child {
              margin-left: 40px;
            }
            img {
              position: absolute;
              right: -28px;
              top: -20px;
            }
          }
        }
        .desc-item {
          // overflow-y: scroll;
          // &::-webkit-scrollbar {
          //     width: 3px;
          // }

          // &::-webkit-scrollbar-thumb {
          //     background: #5281c6;
          // }
        }
      }
    }
  }
  //实训项目制作剪切板
  .cut-dialog {
    .cut-title {
      margin-bottom: 15px;
      p {
        font-size: 14px;
        span {
          font-size: 16px;
        }
      }
    }
    .el-form {
      .el-form-item {
        .el-form-item__content {
          height: auto;
        }
        .desc-num {
          float: right;
          margin-top: 170px;
          color: #bbb;
        }
        .el-textarea {
          float: left;
          width: 85%;
          textarea {
            height: 200px;
            resize: none;
          }
          .el-textarea__inner {
            min-height: 200px;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              width: 5px;
            }

            &::-webkit-scrollbar-thumb {
              background: #6589ae;
              border-radius: 2px;
            }
          }
        }
      }
    }
  }
  // 上传流程
    .common-tool-dialog{
        .el-input{
            float: left;
        }
        .version-file{
            padding: 0 40px;
            .el-form-item{
                margin-bottom: 0;
            }
            .el-button{
                float: left;
                position: relative;
                background: #1277eb;
                color: #fff;
                border-radius: 5px;
                width: 100px;
                height: 36px;
                line-height: 36px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                cursor: pointer;
                span{
                    display: block;
                    cursor: pointer;
                }
            }
            input{
                position: absolute;
                width: 100px;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                background:#cc281a;
                opacity: 0;
                cursor: pointer;
            }
        }
    }
  // 学生手册显隐
  .dialog-display-hide {
    .el-table .blue-row {
      background: #f5f7fb;
    }
  }
  // 镜像保存弹窗
  .dialog-mirror-save {
    .el-form {
      .el-form-item {
        position: relative;
        .el-form-item__content {
          height: auto;
        }
        .el-input {
          .el-input__inner {
            width: 230px;
          }
        }
        .el-textarea {
          height: 180px;
          .el-textarea__inner {
            width: 600px;
            resize: none;
          }
        }
      }
    }
    .distribution-swpier {
      position: relative;
      width: 700px;
      height: 64px;
      margin-bottom: 35px;
      margin-left: 55px;
      margin-top: 15px;
      .swiper-btn {
        background-image: none;
        outline: 0;
        top: 46px;
        i {
          font-size: 20px;
          color: #b1b1b1;
          &:hover {
            color: #474747;
          }
        }
      }
      .swiper-button-prev {
        left: -35px;
      }
      .swiper-button-next {
        right: -35px;
      }
    }
    .distribution-box {
      position: relative;
      width: 100%;
      height: 64px;
      line-height: 64px;
      background: #fff;
      border: solid 1px #d9d9d9;
      border-radius: 5px;
      text-align: center;
      cursor: pointer;
      img {
        width: 100%;
      }
      &:hover {
        border-color: #1277eb;
      }
      i {
        position: absolute;
        bottom: 28px;
        right: 8px;
        font-size: 14px;
        color: #3fdb9b;
        width: 14px;
        height: 14px;
      }
    }
  }
  // 重选配置弹窗样式
  .dialog-distribution {
    .el-dialog__body {
      min-height: 350px;
    }
    .el-form {
      padding: 0 50px;
      .el-dialog__body {
        position: relative;
      }
      .el-form-item__label {
        width: 95px;
      }
      .el-select {
        .el-input__inner {
          width: 80px;
        }
      }
      .el-input__icon {
        line-height: 32px;
      }
      .miror-item {
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
            .el-input__inner {
              width: 150px;
            }
          }
        }
      }
      .config-item {
        .item-config {
          width: 340px;
          .el-select {
            .el-input__inner {
              width: 110px;
            }
          }
        }
        .item-cpu {
          .el-form-item__error {
            left: 95px;
          }
        }
        .el-form-item {
          width: 305px;
          .el-select {
            margin-right: 5px;
          }
          &.item-distributed {
            width: 270px;
            .el-select {
              .el-input__inner {
                width: 180px;
              }
            }
            .el-form-item__error {
              left: 85px;
            }
          }
          &.item-Gpu {
            width: 100px;
            .el-form-item__label {
              width: 55px;
            }
          }
        }
      }
      .form-title {
        font-size: 16px;
        color: #385899;
        width: 85px;
        margin-bottom: 15px;
        text-align: center;
      }
      .el-select {
        .el-input__inner {
          width: 180px;
        }
      }
      .el-cascader {
        line-height: 32px;
      }
      .item-node {
        .el-form-item {
          display: inline-block;
          width: 330px;
        }
      }
    }
    .el-dialog__footer {
      text-align: center;
      .el-button {
        width: auto;
      }
    }
    .button-style {
      min-width: 90px;
    }
    .el-radio-group {
      .el-radio__inner {
        border-color: #dcdfe6;
      }
      .el-radio {
        width: 80px;
      }
    }
    .virtual-step {
      width: 288px;
      border-bottom: solid 3px #dfdfdf;
      margin-top: 15px;
      margin-left: 80px;
      ul {
        li {
          float: left;
          width: 19px;
          height: 19px;
          line-height: 19px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          border-radius: 10px;
          margin: -9px 0 0 0;
          background: #d9d9d9;
          cursor: pointer;
          &.active-disabled{
                cursor:not-allowed;
            }
          &:first-child {
            margin-left: 10%;
          }
          &:nth-child(2) {
            margin-left: 29%;
          }
          &:last-child {
            margin-left: 31%;
          }
          &.active {
            background: #1277eb;
          }
        }
      }
    }
    .distribution-item {
      width: 208px;
      height: 280px;
      border: solid 1px #e8e8e8;
      border-radius: 4px;
      position: absolute;
      right: 55px;
      top: 95px;
      .jx-course-box {
        margin-top: 25px;
        text-align: center;
        img {
          width: 155px;
        }
        span {
          display: block;
          font-size: 14px;
          color: $title-gray;
          margin-top: 10px;
        }
      }
      .jx-course-text {
        margin: 10px 24px 0;
        height: 145px;
        overflow-y: scroll;
        font-size: 12px;
        line-height: 16px;
        color: $table-gray;
        word-wrap: break-word;
        &::-webkit-scrollbar {
          width: 2px;
        }

        &::-webkit-scrollbar-thumb {
          background: #6c6c6c;
        }
      }
    }
  }
}
</style>

